<template>
 <div>
    <CategorySeletor :isDisable="showStatus != typeSpu.SPU_LIST"/>
    <el-card class="box-card" style="margin-top:10px;">
     <SpuList @setshowSpu="changeshowStatus" @getspuInfo="transmit" v-if="showStatus === typeSpu.SPU_LIST"/>
     <SpuForm @setshowSpu="changeshowStatus" :currentSpuInfo="currentSpuInfo" v-if="showStatus === typeSpu.SPU_FORM"/>
     <SkuForm @setshowSpu="changeshowStatus" @getspuInfo="transmit" :currentSpuInfo="currentSpuInfo" v-if="showStatus === typeSpu.SKU_FORM"/>
    </el-card>
  </div>
</template>

<script lang="ts">
// import CategorySeletor from '@/components/CategorySeletor/index.vue'
  export default {
    name:'Spu',
    // components:{CategorySeletor}
  }
</script>

<script lang="ts" setup>
// 如果将子组件在这个语法糖中引入的话，不需要注册直接引入后使用即可
import SpuForm from "./components/SpuForm.vue";
import SkuForm from './components/SkuForm.vue';
import SpuList from './components/SpuList.vue';
import {typeSpu} from './type';
import { ref } from 'vue';

// 定义一个变量，来判断显示页面
const showStatus = ref(typeSpu.SPU_LIST)

// 定义一个变量，来存储数据,回显数据的
const currentSpuInfo = ref()

// 更改要显示的组件名称
const changeshowStatus =(status:typeSpu)=>{
  showStatus.value = status
}
// 编辑回显传递数据，切换页面
const transmit = (spuInfo)=>{
  // currentSpuInfo.value = spuInfo
   currentSpuInfo.value = {
    ...spuInfo,
    // 避免报错，将数组赋值为空，不然数组的方法使用不了，报错undefined
    spuSaleAttrList:[],
    spuImageList: [],
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>